<template>
  <div class="layout">
    <TabBar v-if="!$store.state.isMicroApp && !$route.meta.back"></TabBar>
    <div class="layout_main" v-if="!$store.state.isMicroApp">
      <Header>
        <template v-if="$route.name === 'user'">
          <router-link
            to="/customerService"
            class="iconfont icon-help"
          ></router-link>
        </template>
        <template v-if="$route.name === 'recommend'">
          <router-link to="/search" class="iconfont icon-search"></router-link>
        </template>
      </Header>
      <div class="page">
        <router-view></router-view>
      </div>
    </div>
    <div id="container" v-else></div>
  </div>
</template>
<script>
export default {
  name: "Layout",
  components: {
    Header: () =>
      import(/* webpackChunkName:'header' */ "../components/header.vue"),
    TabBar: () =>
      import(/* webpackChunkName:'tabbar' */ "../components/tabbar.vue"),
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
.layout {
  .page {
    margin: 0;
    padding: 10px 0;
  }
  .icon-help {
    font-size: 24px;
    font-weight: 400;
  }
  .icon-search {
    font-size: 24px;
    font-weight: 400;
  }
}
</style>
